KDT0_YebinSeo UberEats 클론 코딩 #69
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
syb0127
commented
Jul 28, 2023
syb0127
commented
- 클론한 사이트
- https://www.ubereats.com/
- 데모 링크
- https://ubereats-clone-coding.netlify.app/
- 구현한 내용
- 자리는 고정되었지만 스크롤을 내리면 배경색이 바뀌는 Nav bar. mouse를 hover하면 색이 바뀌는 버튼과 input이 detect되면 밑에 줄이 생기는 input field. 누르면 dropdown menu가 생기는 버튼(다른 곳을 클릭하면 사라짐). Multicol을 사용해 여러 column으로 나뉘는 리스트.
- 사용한 라이브러리 및 스택
- 이미지는 Image Downloader를 사용했고 스크랩 되지 않은 이미지는 구글링이나 스크린샷으로 대체했다. 아이콘은 fontawesome이라는 사이트를 통해 가져왔다.
- 아쉬운 점, 느낀점
- 시간이 촉박해 맵을 라이브러리로 구현하지 못하고 이미지 파일로 써서 아쉽다. 또한 input field도 상세하게 구현을 하지 못해서 아쉽다. 프로젝트 경험이 거의 없어 초반에 감을 잡는데 시간이 좀 걸렸는데 어느 정도 익숙해진 후에는 작업 속도가 급속도로 빨라진 것을 보아 시간 조절만 잘 했다면 훨씬 더 완성도 높은 사이트를 구현 할수 있었을텐데 아쉽다. 앞으로는 더욱 속도를 내서 과제 및 프로젝트를 진행하고 질문을 하는 것을 두려워 하지 않는 자세를 가져야겠다. 제출할때 깃이 꼬여버려서 제출에만 1시간 반 넘게 쓰고 지각제출이다. 깃 공부를 제대로 할수 있어서 좋은 기회기도 했지만 어쨌든 지각이라 너무 아쉽다. 이럴까봐 나름 여유있게 제출을 시작했는데 앞으론 더 빨리 앞당겨서 제출해야겠다.
- 오류 해결법
- Flexbox 디버깅을 위해 구글링을 많이 했는데 새로운 방식에 대한 모색은 Stack Overflow, 단순 에러 디버깅은 시행착오를 통해 직접 알아내거나 ChatGPT의 도움을 받았다. 또한 조원들과도 상의해서 모르는 것은 물어보고 답변도 해주며 함께 공부 해나갔다(8조 조원분들 싸랑해여). Git에 관련된 문제는 블로그, 스택 오버플로우, 구글 등등 많은 곳에 찾아봤다.
✅ Deploy Preview for chipper-rugelach-272280 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
고생하셨어요! |
|
style이나 script는 따로 파일에 작성해주시면 더 좋을 거 같아요!! |
|
완전 잘하셨어요 고생하셨습니다! |
|
실제 사이트와 유사하게 잘 하신 것 같아요! :) |
jungHyeonS
reviewed
Aug 5, 2023
| </div> | ||
|
|
||
| <div class = "section1"> | ||
| <img src = "UberEats/UberEatsImages05.png" width=100% height=auto class="yellow-background"> |
There was a problem hiding this comment.
웹 접근성을 고려해서 이미지 태그에는 alt 속성을 필수적으로 넣어주시는게 좋습니다~
Comment on lines
+29
to
+70
| <div class = "top-left">Order food to your door | ||
| <style> | ||
| .dropbtn { | ||
| color: white; | ||
| font-size: 16px; | ||
| border: none; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .dropbtn:hover, .dropbtn:focus { | ||
| background-color: white; | ||
| } | ||
|
|
||
| .dropdown { | ||
| float: right; | ||
| position: relative; | ||
| display: inline-block; | ||
| } | ||
|
|
||
| .dropdown-content { | ||
| display: none; | ||
| position: absolute; | ||
| background-color: white; | ||
| min-width: 160px; | ||
| overflow: auto; | ||
| right: 0; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .dropdown-content a { | ||
| color: black; | ||
| padding: 12px 16px; | ||
| text-decoration: none; | ||
| display: block; | ||
| } | ||
|
|
||
| .dropdown a:hover .hover_img{display: inline /*background: "UberEats/UberEatsImages01.png"*/} | ||
|
|
||
| .show {display: block;} | ||
| </style> | ||
|
|
||
| <div class="dropdown" style="position:relative; padding-right: 500px;"> |
There was a problem hiding this comment.
위와 같이 html 코드 안에 style을 넣은것은 인라인 스타일 이라고 합니다 인라인 스타일 같은경우는 작업할때는 편하지만 코드의 가독성을 많이 떨어트리는 요소입니다! 따라서 추후에는 css 파일을 완전히 분리해주시는게 좋을꺼같습니다!
Comment on lines
+79
to
+100
|
|
||
| <script> | ||
| /* When the user clicks on the button, | ||
| toggle between hiding and showing the dropdown content */ | ||
| function myFunction() { | ||
| document.getElementById("myDropdown").classList.toggle("show"); | ||
| } | ||
|
|
||
| // Close the dropdown if the user clicks outside of it | ||
| window.onclick = function(event) { | ||
| if (!event.target.matches('.dropbtn')) { | ||
| var dropdowns = document.getElementsByClassName("dropdown-content"); | ||
| var i; | ||
| for (i = 0; i < dropdowns.length; i++) { | ||
| var openDropdown = dropdowns[i]; | ||
| if (openDropdown.classList.contains('show')) { | ||
| openDropdown.classList.remove('show'); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| </script> |
There was a problem hiding this comment.
html 채그 중간에 스크립트 태그가 존재하면 렌더링 성능이 매우 낮아집니다! html 파싱중 스크립트를 만나면 파싱을 중단하기 때문에 아예 head 넣거나, body아래다가 넣으시는것을 추천드립니다~
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.